<template>
  <view class="set-page">
    <view class="set-list">
      <view class="set-nav">
        <view class="set-title">头像</view>
        <view class="set-label">
          <UploadAvatar></UploadAvatar>
          <up-icon name="arrow-right" color="#999999" size="24rpx"></up-icon>
        </view>
      </view>
      <view class="set-nav">
        <view class="set-title">微信昵称</view>
        <view class="set-label">
          微信昵称
          <up-icon name="arrow-right" color="#999999" size="24rpx" style="opacity: 0;"></up-icon>
        </view>
      </view>
      <view class="set-nav">
        <view class="set-title">用户编号</view>
        <view class="set-label">
          1234
          <up-icon name="arrow-right" color="#999999" size="24rpx" style="opacity: 0;"></up-icon>
        </view>
      </view>
      <view class="set-nav">
        <view class="set-title">手机号</view>
        <view class="set-label">
          12345678911
          <up-icon name="arrow-right" color="#999999" size="24rpx"></up-icon>
        </view>
      </view>
    </view>
    <button class="set-btn" @click="onClick">退出登录</button>
  </view>
</template>

<script setup>
  import UploadAvatar from './components/Upload-Avatar.vue'
  function onClick() {
    console.log(111)
  }
</script>

<style lang="less" scoped>
  .set-page {
    height: 100%;
    box-sizing: border-box;
    padding: 32rpx 24rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .set-list {
      width: 100%;
      height: 448rpx;
      border-radius: 24rpx;
      background: rgba(255, 255, 255, 1);
      box-sizing: border-box;
      padding: 0 32rpx;

      .set-nav {
        width: 100%;
        height: 112rpx;
        border-bottom: 1rpx solid #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 30rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);

      }

      .set-nav:last-child {
        border: none;
      }

      .set-label {
        font-size: 30rpx;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        display: flex;
        align-items: center;
        box-sizing: border-box;
        // padding-right: 40rpx;
        /deep/ .u-icon--right{
          margin-left: 20rpx;
        }
      }
    }

    .set-btn {
      width: 100%;
      height: 88rpx;
      border-radius: 132rpx;
      background: #FFFFFF;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 88rpx;
      color: rgba(255, 65, 108, 1);
      text-align: center;
    }
  }
</style>